import React, {Component, PropTypes} from 'react';
import {Menu, Icon} from 'antd';
import {getSubTree} from "../../services/showServer";
const SubMenu = Menu.SubMenu;

import cookie from 'js-cookie';

class MenuTreeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      point: {
        id: 0,
        type: 0,
        path: '',
        subname: '',
        catname: ''
      },
      current: '',
      treeData: {
        "id": "0",
        "name": "主题",
        "children": []
      },
    };
  }

  componentWillMount() {
    var username = cookie.get('username');
    getSubTree(username).then(function (json) {
      if (json.id) {
        this.setState({
          treeData: json
        });
      }
    }.bind(this));
  }

  handleClick(e) {
    var keyPath = e.keyPath;
    var path = '';
    var subn = '';
    var catn = '';
    var data = this.state.treeData.children;
    for (var i in data) {
      if (data[i].id == keyPath[1]) {
        path = data[i].name;
        subn = data[i].name;
        var cdata = data[i].children;
        for (var j in cdata) {
          if (cdata[j].id == keyPath[0]) {
            path = path + " > " + cdata[j].name;
            catn = cdata[j].name;
            break;
          }
        }
        break;
      }
    }

    var point = {
      id: e.key,
      type: 2,
      path: path,
      subname: subn,
      catname: catn
    }
    this.setState({
      point: point,
      current: e.key,
    });
    this.props.signal.dispatch(point);
  }

  titleClick(e) {
    var path = '';
    var subn = '';
    var data = this.state.treeData.children;
    for (var i in data) {
      if (data[i].id == e.key) {
        path = data[i].name;
        subn = data[i].name;
        break;
      }
    }

    var point = {
      id: e.key,
      type: 1,
      path: path,
      subname: subn,
      catname: ''
    }
    this.setState({
      point: point,
    });
    this.props.signal.dispatch(point);
  }

  render() {
    const SubMenuLoop = data => data.map((item) => {
      if (item.children) {
        return <SubMenu title={<span><Icon type="windows"/><span>{item.name}</span></span>} key={item.id}
                        onTitleClick={this.titleClick.bind(this)}>{ItemLoop(item.children)}</SubMenu>;
      }
      return <SubMenu title={<span><Icon type="windows"/><span>{item.name}</span></span>} key={item.id}
                      onTitleClick={this.titleClick.bind(this)}>{null}</SubMenu>;
    });

    const ItemLoop = data => data.map((item) => {
      return <Menu.Item key={item.id}>
        {<span><Icon type="appstore"/><span>{item.name}</span></span>}
      </Menu.Item>
    });

    const treeNodes = SubMenuLoop(this.state.treeData.children);

    return (
      <Menu onClick={this.handleClick.bind(this)}
            style={{width: '100%'}}
            selectedKeys={[this.state.current]}
            mode="inline"
      >
        {treeNodes}
      </Menu>
    );
  }
}

export default MenuTreeContainer;
